<template>
  <a-menu>
    <a-row justify="center">
      <a-col :span="6">
        <a-menu-item key="home">
          <template #icon>
            <home-outlined />
          </template>
          Codes
          <router-link :to="{ name: 'home' }"></router-link>
        </a-menu-item>
      </a-col>

      <a-col :span="3">
        <a-menu-item key="app">
          <template #icon>
            <appstore-outlined />
          </template>
          对战
          <router-link :to="{ name: 'pk' }"></router-link>
        </a-menu-item>
      </a-col>

      <a-col :span="3">
        <a-menu-item key="mail">
          <template #icon>
            <mail-outlined />
          </template>
          对局列表
          <router-link :to="{ name: 'record' }"></router-link>
        </a-menu-item>
      </a-col>

      <a-col :span="3">
        <a-menu-item key="message">
          <template #icon>
            <team-outlined />
          </template>
          排行
          <router-link :to="{ name: 'ranks' }"></router-link>
        </a-menu-item>
      </a-col>

      <a-col :span="3">
        <a-menu-item key="photo">
          <template #icon>
            <mail-outlined />
          </template>
          消息
          <router-link
            :to="{ name: 'message' }"
          ></router-link>
        </a-menu-item>
      </a-col>
      <template v-if="!$store.state.user.info.is_login">
        <a-col :span="2">
          <a-menu-item key="login">
            <template #icon>
              <user-outlined />
            </template>
            登录
            <router-link :to="{ name: 'login' }"></router-link>
          </a-menu-item>
        </a-col>
        <a-col :span="2">
          <a-menu-item key="register">
            <template #icon>
              <user-add-outlined />
            </template>
            注册
            <router-link :to="{ name: 'register' }"></router-link>
          </a-menu-item>
        </a-col>
      </template>

      <template v-else>
        <a-col :span="4">
          <a-row justify="center">
            <a-col :span="16">
              <a-sub-menu key="sub1">
                <template #icon>
                  <a-avatar :size="40" :src="$store.state.user.info.avatar">
                    <template #icon><UserOutlined /></template>
                  </a-avatar>
                </template>
                <template #title>
                  {{ $store.state.user.info.username }}
                </template>
                <a-menu-item-group title="个人中心">
                  <a-menu-item key="setting:1">
                    <router-link
                      :to="{
                        name: 'userspace',
                        params: { userId: $store.state.user.info.id },
                      }"
                    >
                      我的空间
                    </router-link>
                  </a-menu-item>
                  <a-menu-item key="setting:2">
                    <router-link :to="{ name: 'userinfo' }">
                      个人信息
                    </router-link>
                  </a-menu-item>
                </a-menu-item-group>
                <a-menu-item-group title="功能">
                  <a-menu-item key="setting:3">
                    <router-link :to="{ name: 'editessay' }">
                      写文章
                    </router-link>
                  </a-menu-item>
                  <a-menu-item key="setting:4">
                    <router-link :to="{ name: 'bot' }"> 我的Bot </router-link>
                  </a-menu-item>
                </a-menu-item-group>

                <a-menu-item-group title="注销">
                  <a-menu-item key="setting:5" @click="logout()"
                    >注销</a-menu-item
                  >
                </a-menu-item-group>
              </a-sub-menu>
            </a-col>
          </a-row>
        </a-col>
      </template>
    </a-row>
  </a-menu>
</template>
<script>
import { ref } from "vue";
//import {}
import {
  HomeOutlined,
  MailOutlined,
  AppstoreOutlined,
  UserOutlined,
  UserAddOutlined,
  TeamOutlined,
} from "@ant-design/icons-vue";
import { useStore } from "vuex";
import router from "@/router/index";
export default {
  name: "NavBar",
  components: {
    TeamOutlined,
    UserOutlined,
    HomeOutlined,
    MailOutlined,
    AppstoreOutlined,
    UserAddOutlined,
  },
  setup() {
    const current = ref(["mail"]);

    const store = useStore();

    const logout = () => {
      localStorage.clear();
      store.commit("clear");
      router.push("login");
    };

    return {
      current,
      logout,
    };
  },
};
</script>